import React from 'react';
import { observer, inject } from 'mobx-react';
import css from './index.less';
import PropTypes from 'prop-types';
import SliderPage from 'modules/slider/components/sliderPage/render';

@inject('store')
@observer
export default class Slider extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  renderSliderContent() {
    const { mod } = this.props;
    const props = {
      style: {
        width: mod.width,
        height: mod.height,
      },
      className: css.sliderContent,
    };
    // 暂时只渲染第一页轮播
    const list = [].concat(mod.list[0]);
    return (
      <div {...props}>
        {
          list.map((item, index) => {
            const _props = {
              mod: item,
              key: `slider-page-${index}`,
            };
            return (
              <SliderPage {..._props} />
            );
          })
        }
      </div>
    );
  }

  render() {
    const { mod, mod: { style }, store: { project }, ...other } = this.props;
    if (!mod) {
      return (
        <div>
          轮播渲染失败
        </div>
      );
    }

    const props = {
      className: css.slider,
      style,
      onDoubleClick: () => {
        project.update('currentPages', mod);
        mod.select(mod.list[0]);
      },
      ...other,
    };

    return (
      <div {...props}>
        {this.renderSliderContent()}
      </div>
    );
  }
}
